<template>
	<a-modal class="algorithm-punish-modal" open :title="c_Title" :width="416" @cancel="emits('close')">
		<div class="content">
			<a-form ref="formRef" layout="vertical" :model="formState">
				<a-form-item
					label="算法"
					name="algorithmItem"
					style="margin-bottom: 32px"
					:rules="[{ required: true, message: '请选择算法', trigger: 'blur' }]"
				>
					<a-select
						v-model:value="formState.algorithmItem"
						placeholder="请选择算法"
						label-in-value
						:options="algorithmList"
						style="width: 100%"
					>
					</a-select>
				</a-form-item>

				<div class="bottom-group">
					<a-form-item label="记分" name="scope" :rules="[{ required: true, message: '请输入记分', trigger: 'blur' }]">
						<a-input-number v-model:value="formState.scope" :step="1" :min="1" style="min-width: 134px"></a-input-number>
						<span style="margin-left: 2px; color: #b0b5c0">分</span>
					</a-form-item>

					<a-form-item label="罚款金额" name="forfeit" :rules="[{ required: true, message: '请输入罚款金额', trigger: 'blur' }]">
						<a-input-number v-model:value="formState.forfeit" :step="50" :min="0" style="min-width: 134px"></a-input-number>
						<span style="margin-left: 2px; color: #b0b5c0">元</span>
					</a-form-item>
				</div>
			</a-form>
		</div>

		<template #footer>
			<a-button key="back" @click="emits('close')">取消</a-button>
			<a-button key="submit" type="primary" :loading="loading" @click="handleOk">确认</a-button>
		</template>
	</a-modal>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue';
import httpServe from '@/global-services/index';

interface IProps {
	id?: string | number;
}
const props = withDefaults(defineProps<IProps>(), {
	id: ''
});

const emits = defineEmits(['close', 'ok']);

const algorithmList = ref<Record<string, any>[]>([]);
const getAlgorithms = async () => {
	const res: any = await httpServe.getHttp('/base/aiService/selectList')();
	if (res.code === 0) {
		algorithmList.value = res.data.map((i: any) => {
			return { label: i.label, value: i.value };
		});
	}
};

const c_Title = computed(() => (!props.id ? '新增' : '编辑'));
const loading = ref(false);
const formRef = ref();
const formState = ref<Record<string, any>>({
	algorithmItem: undefined,
	scope: 1, // 计分
	forfeit: 200 // 罚款金额
});

const getInfo = async () => {
	const res: any = await httpServe.getHttp(`/base/ruler/punish/selectRuler?id=${props.id}`)();
	if (res.code === 0) {
		formState.value = {
			algorithmItem: { label: res.data.aiSrvName, value: res.data.aiSrvId },
			scope: res.data.scope,
			forfeit: res.data.forfeit
		};
	}
};

const handleOk = () => {
	formRef.value
		.validate()
		.then(async () => {
			const url = !props.id ? '/base/ruler/punish/saveRuler' : '/base/ruler/punish/updateRuler';
			const form: any = {
				aiSrvId: formState.value.algorithmItem.value,
				aiSrvName: formState.value.algorithmItem.label,
				scope: formState.value.scope,
				forfeit: formState.value.forfeit
			};
			if (props.id) {
				form.id = props.id;
			}

			const res: any = await httpServe.postHttp(url)(form);
			console.log('新增算法罚款', res);
			if (res.code === 0) {
				message.success('新增算法罚款设置成功');
				emits('ok');
			}
		})
		.catch((error: any) => {
			console.log('新增算法罚款error', error);
		});
};

onMounted(async () => {
	if (props.id) {
		await getInfo();
	}
	getAlgorithms();
});
</script>

<style lang="less">
.algorithm-punish-modal {
	.ant-input,
	.ant-input-number {
		border: 1px solid @mask02 !important;
		color: @text01 !important;
		background-color: transparent !important;

		&::placeholder {
			color: @text04 !important;
		}
	}

	.ant-input-affix-wrapper {
		background-color: transparent !important;
	}

	.content {
		padding: 40px 40px 20px;
	}

	.bottom-group {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 32px;
		align-items: center;
	}
}
</style>
